<template>
  <div>
    <Table ref="dataTable" stripe :loading="table.loading" :columns="table.tableColumns" :data="table.tableRows" style="margin-top:20px;"
      @on-select="select" @on-select-cancel="selectCancel" @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel"
      @on-sort-change="changeSort"></Table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <Page :total="pager.total" :current="pager.pageNo" @on-change="changePageNo" @on-page-size-change="changePageSize"
          showSizer showTotal></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import * as utils from '@/api/utils-v2'

  export default {
    name: 'GraphicLinkTableMain',
    data() {
      return {
        urls: {
          searchUrl: '/graphic-link/admin/pager-cond',
          activeUrl: '/graphic-link/admin/active',
          removeUrl: '/graphic-link/admin/remove/'
        },
        pager: {
          pageNo: 1,
          pageSize: 10,
          total: 0
        },
        searchOpts: {
          sortColumn: null,
          sortOrder: null,
        },
        dataDictCodes: ['IS_ACTIVE'],
        dataDictItems: {},
        table: {
          loading: false,
          tableColumns: [{
              type: 'selection',
              width: 52,
              key: 'id',
              align: 'center',
              fixed: 'left'
            },
            {
              title: '图文店',
              key: 'graphicId',
              minWidth: 180,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.graphicValue)
              }
            },
            {
              title: '纸张类型',
              key: 'zzlx',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.zzlx)
              }
            },
            {
              title: '颜色',
              key: 'ys',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.ys)
              }
            },
            {
              title: '单双面',
              key: 'dsm',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.dsm)
              }
            },
            {
              title: '价格',
              key: 'price',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.price)
              }
            },
            {
              title: '装订',
              key: 'zhuangding',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.zhuangding)
              }
            },
            {
              title: '缩印',
              key: 'suoyin',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.suoyin)
              }
            },
            {
              title: "操作",
              key: "action",
              width: 120,
              align: "center",
              fixed: "right",
              render: (h, params) => {
                return h(
                  "Dropdown", {
                    on: {
                      "on-click": itemName => {
                        this.userOpt(itemName, params.row);
                      }
                    },
                    props: {
                      transfer: true
                    }
                  },
                  [
                    h(
                      "Button", {
                        props: {
                          type: "primary",
                          size: "small"
                        }
                      },
                      [
                        "选择操作 ",
                        h("Icon", {
                          props: {
                            type: "ios-arrow-down"
                          }
                        })
                      ]
                    ),
                    h(
                      "DropdownMenu", {
                        slot: "list"
                      },
                      [
                        h(
                          "DropdownItem", {
                            props: {
                              name: "showEdit"
                            }
                          },
                          "编辑"
                        ),
                        h(
                          "DropdownItem", {
                            props: {
                              name: "showDetail"
                            }
                          },
                          "详情"
                        ),
                        h(
                          "DropdownItem", {
                            props: {
                              name: "remove"
                            }
                          },
                          [
                            h(
                              "span", {
                                style: {
                                  color: "red"
                                }
                              },
                              "删除"
                            )
                          ]
                        ),
                      ]
                    )
                  ]
                );
              }
            }
          ],
          tableRows: [],
          selections: []
        }
      }
    },
    computed: {},
    mounted() {
      this.search()
    },
    methods: {
      search() {
        this.$emit('searchTable')
      },
      userOpt(itemName, row) {
        if (itemName === "showEdit") {
          this.$emit('showEditModal', JSON.parse(JSON.stringify(row)))
        } else if (itemName === "showDetail") {
          this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
        } else if (itemName === "remove") {
          utils.remove(this, row);
        }
      },
      active(row) {
        utils.active(this, row)
      },
      select(selections, row) {
        utils.select(this, selections, row)
      },
      selectCancel(selections, row) {
        utils.selectCancel(this, selections, row)
      },
      selectAll(selections) {
        utils.selectAll(this, selections)
      },
      selectAllCancel(selections) {
        utils.selectAllCancel(this, selections)
      },
      changeSort(sortColumn) {
        utils.changeSort(this, sortColumn)
      },
      changePageNo(pageNo) {
        utils.changePageNo(this, pageNo)
      },
      changePageSize(pageSize) {
        utils.changePageSize(this, pageSize)
      }
    }
  }
</script>

<style>
</style>
